<template>
  <div class="page-wrapper">
    <c-box class="item-1" title="周期电量分布图(万kw.h)">
      <div class="item-1-wrapper">
        <div style="height: 100%;">
          <div v-if="load1" id="echarts-1" class="echarts"></div>
          <c-empty v-else></c-empty>
        </div>
        <div style="height: 100%;">
          <div v-if="load2" id="echarts-2" class="echarts"></div>
          <c-empty v-else></c-empty>
        </div>
      </div>
    </c-box>
    <c-box class="item-2" title="周期电费分布及走势图(万元)">
      <div v-if="load3" id="echarts-3" class="echarts"></div>
      <c-empty v-else></c-empty>
    </c-box>
    <c-box class="item-3" title="周期电费分布图(万元)">
      <div v-if="load4" id="echarts-4" class="echarts"></div>
      <c-empty v-else />
    </c-box>
    <c-box class="item-4" title="周期电量走势图(万kw.h)">
      <div v-if="load5" id="echarts-5" class="echarts"></div>
      <c-empty v-else />
    </c-box>
  </div>
</template>

<script>
import CBox from "@/components/PageCard";
import CEmpty from "@/components/CEmpty";
import { colors, textColor, legend, grid } from "@/utils/echarts";
import echarts from "echarts";
import { forEach } from "lodash";
import { toWanKwH, getLastDayOfMonth, getLastMonth } from "@/utils";
const now = getLastDayOfMonth(getLastMonth(new Date()));
export default {
  name: 'CycPower',
  components: {
    CBox,
    CEmpty
  },
  data() {
    return {
      powers: null,
      collects: {},
      selected: {
        year: now.getFullYear(),
        index: 1
      },
      load1: false,
      load2: false,
      load3: false,
      load4: false,
      load5: false
    };
  },
  computed: {
    comId() {
      return this.$store.getters.comId;
    }
  },
  async mounted() {
    try {
      const res = await this.$axios.post("/eng/lad/electCycle", {
        id: this.comId
      });
      this.powers = res.data;
      if (JSON.stringify(this.powers) === "{}") {
        return;
      }
      const ks = Object.keys(this.powers);
      this.$set(this.selected, "year", ks[0]);
      this.$set(this.selected, "index", this.powers[this.selected.year].length);
      this.load1 = true;
      this.load2 = true;
      this.$nextTick(() => {
        this.echarts1 = echarts.init(document.getElementById("echarts-1"));
        this.echarts2 = echarts.init(document.getElementById("echarts-2"));

        this.setOption1();
        this.setOption2();
        this.setOption3();
        this.setOption4();
        this.echarts1.on("click", async p => {
          if (p.seriesIndex === 0) {
            this.selected = { year: p.name, index: 1 };
          } else if (p.seriesIndex === 1) {
            this.selected = { year: p.data.year, index: p.data.index };
          } else {
            this.selected = {
              year: p.data.year,
              index: p.data.index
            };
          }
          this.setOption1();
          this.setOption2();
          this.setOption3();
          this.setOption4();
        });
      });
    } catch (error) {
      console.log(error);
      this.$message.error("加载数据失败!");
    }
  },
  methods: {
    setOption1() {
      const data1 = [],
        data2 = [],
        data3 = [];

      forEach(this.powers, (v, k) => {
        let t = 0;
        const len = v.length;
        v.forEach((e, i) => {
          const r = {
            name: "周期" + (len - i),
            year: e.year,
            index: i + 1,
            value: toWanKwH(e.totalpower)
            // itemStyle: {
            //   color:
            //     this.selected.index === i + 1 && this.selected.year === e.year
            //       ? activeColor
            //       : color
            // }
          };
          data2.push(r);
          const jfpg = [
            {
              name: "尖",
              value: toWanKwH(e.jianPower),
              year: e.year,
              index: i + 1
              // itemStyle: {
              //   color:
              //     this.selected.index === i + 1 && this.selected.year === e.year
              //       ? activeColor
              //       : color
              // }
            },
            {
              name: "峰",
              value: toWanKwH(e.fengPower),
              year: e.year,
              index: i + 1
              // itemStyle: {
              //   color:
              //     this.selected.index === i + 1 && this.selected.year === e.year
              //       ? activeColor
              //       : color
              // }
            },
            {
              name: "平",
              value: toWanKwH(e.pingPower),
              year: e.year,
              index: i + 1
              // itemStyle: {
              //   color:
              //     this.selected.index === i + 1 && this.selected.year === e.year
              //       ? activeColor
              //       : color
              // }
            },
            {
              name: "谷",
              value: toWanKwH(e.guPower),
              year: e.year,
              index: i + 1
              // itemStyle: {
              //   color:
              //     this.selected.index === i + 1 && this.selected.year === e.year
              //       ? activeColor
              //       : color
              // }
            }
          ];
          data3.push(...jfpg);
          t += parseFloat(e.totalpower) || 0;
        });
        const y = {
          name: k,
          value: toWanKwH(t)
        };
        data1.push(y);
      });
      const option = {
        tooltip: {},
        color: colors,
        title: {
          text: "周期电量分布图(万kw.h)",
          textStyle: {
            fontSize: 14,
            align: "center",
            fontWeight: "normal"
          },
          x: "center",
          y: "1%"
        },
        grid,
        legend: {
          show: false,
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            fontSize: 14
          },
          icon: "roundRect"
        },
        series: [
          // 主要展示层的
          {
            radius: ["25%", "45%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            // itemStyle: {
            //   normal: {
            //     color: color,
            //     borderColor: "white"
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            name: "年用电量",
            data: data1
          },
          {
            radius: ["45%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            // itemStyle: {
            //   normal: {
            //     color: color,
            //     borderColor: "white"
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            name: "月用电量",
            data: data2
          },
          {
            radius: ["65%", "85%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            // itemStyle: {
            //   normal: {
            //     color: color,
            //     borderColor: "white"
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            data: data3
          }
        ]
      };
      this.echarts1.setOption(option);
    },
    async setOption2() {
      const data1 = [],
        data2 = [],
        data3 = [],
        title =
          this.selected.year +
          "年第" +
          (this.powers[this.selected.year].length - this.selected.index + 1) +
          "周期";
      const _data = await this.getCollection();
      _data.forEach(c => {
        let t = 0;
        c.listClnt.forEach(s => {
          const m = s.totalpower,
            n = s.transformer,
            r = [
              {
                name: "尖电量",
                value: toWanKwH(s.jianPower),
                label: {
                  show: false
                }
              },
              {
                name: "峰电量",
                value: toWanKwH(s.fengPower),
                label: {
                  show: false
                }
              },
              {
                name: "平电量",
                value: toWanKwH(s.pingPower),
                label: {
                  show: false
                }
              },
              {
                name: "谷电量",
                value: toWanKwH(s.guPower),
                label: {
                  show: false
                }
              }
            ];
          // n = n.replace("配变", "");
          // n = n.replace("低压进线", "");
          data2.push({
            name: n,
            label: {
              formatter: a => {
                const n = a.name.replace("配变", "").replace("低压进线", "");
                return n;
              }
            },
            value: toWanKwH(m)
          });
          data3.push(...r);
          t += m;
        });
        data1.push({
          name: c.switchRoom,
          value: toWanKwH(t),
          label: {
            formatter: a => {
              return a.name.replace("配电房", "");
            }
          }
        });
      });
      const option = {
        color: colors,
        tooltip: {},
        title: {
          text: title + "电量采集图(万kw.h)",
          textStyle: {
            fontSize: 14,
            align: "center",
            fontWeight: "normal"
          },
          x: "center",
          y: "1%"
        },
        grid,
        legend: {
          show: false,
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 14
          },
          icon: "roundRect"
        },
        series: [
          // 主要展示层的
          {
            radius: ["25%", "45%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12,
                  color: "#fff"
                }
              }
            },
            name: "年用电量",
            data: data1
          },
          {
            radius: ["45%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12,
                  color: '#fff'
                }
              }
            },
            name: "月用电量",
            data: data2
          },
          {
            radius: ["65%", "85%"],
            center: ["50%", "50%"],
            type: "pie",
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontSize: 12,
                  color: textColor
                }
              }
            },
            data: data3
          }
        ]
      };
      this.echarts2.setOption(option);
    },
    async setOption3() {
      const cur = this.powers[this.selected.year][this.selected.index - 1];
      const res = await this.$axios.post("/eng/lad/cycleFess", {
          id: this.comId,
          dateOne: cur.dateTwo,
          dateTwo: cur.dateOne
        }),
        _data = res.data,
        xData = [],
        data1 = [],
        data2 = [],
        data3 = [],
        data4 = [],
        total = [];
      this.load3 = true;
      this.load5 = true;
      this.$nextTick(() => {
        if (!this.echarts3) {
          this.echarts3 = echarts.init(document.getElementById("echarts-3"));
        }
        if (!this.echarts5) {
          this.echarts5 = echarts.init(document.getElementById("echarts-5"));
        }
        _data.map(e => {
          data1.push(toWanKwH(e.jianEFees));
          data2.push(toWanKwH(e.fengEFees));
          data3.push(toWanKwH(e.pingEFees));
          data4.push(toWanKwH(e.guEFees));
          total.push(toWanKwH(e.totalEFees));
          xData.push(e.dateval);
        });
        const option = {
          color: colors,
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["尖电费", "峰电费", "平电费", "谷电费", "总电费"],
            top: "2%",
            ...legend
          },
          grid: {
            top: 40
          },
          xAxis: {
            type: "category",
            data: xData,
            axisLine: {
              lineStyle: {
                color: textColor
              }
            },
            axisTick: { show: false }
          },
          yAxis: {
            name: "万元",
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: textColor
              }
            },
            axisTick: { show: false }
          },
          series: [
            {
              name: "尖电费",
              type: "bar",
              stack: "powerfee",
              barCategoryGap: "50%",
              data: data1
            },
            {
              name: "峰电费",
              type: "bar",
              stack: "powerfee",
              barCategoryGap: "50%",
              data: data2
            },
            {
              name: "平电费",
              type: "bar",
              stack: "powerfee",
              barCategoryGap: "50%",
              data: data3
            },
            {
              name: "谷电费",
              type: "bar",
              stack: "powerfee",
              barCategoryGap: "50%",
              data: data4
            },
            {
              name: "总电费",
              type: "line",
              data: total,
              // barGap: "-100%",
              // barCategoryGap: "50%",
              z: 3
            }
          ]
        };
        this.echarts3.setOption(option);
        this.setOption5(_data);
      });
    },
    async setOption4() {
      const cur = this.powers[this.selected.year][this.selected.index - 1];
      const res = await this.$axios.post("/eng/lad/electFessZB", {
          id: this.comId,
          dateOne: cur.dateTwo,
          dateTwo: cur.dateOne
        }),
        d = res.data[0],
        data = [
          {
            value: toWanKwH(d.jianEFees),
            name: "尖电费"
          },
          {
            value: toWanKwH(d.fengEFees),
            name: "峰电费"
          },
          {
            value: toWanKwH(d.pingEFees),
            name: "平电费"
          },
          {
            value: toWanKwH(d.guEFees),
            name: "谷电费"
          }
        ];
      this.load4 = true;
      this.$nextTick(() => {
        if (!this.echarts4) {
          this.echarts4 = echarts.init(document.getElementById("echarts-4"));
        }
        const option = {
          tooltip: {
            trigger: "item"
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: colors,
          legend: {
            ...legend,
            y: "2%",
            data: ["尖电费", "峰电费", "平电费", "谷电费"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "65%",
              center: ["40%", "50%"],
              label: {
                show: true,
                formatter: "{b}:{d}%"
              },
              data: data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        this.echarts4.setOption(option);
      });
    },
    setOption5(d) {
      const xData = [],
        data1 = [],
        data2 = [],
        data3 = [],
        data4 = [];
      d.forEach(e => {
        xData.push(e.dateval);
        data1.push(toWanKwH(e.jianPower));
        data2.push(toWanKwH(e.fengPower));
        data3.push(toWanKwH(e.pingPower));
        data4.push(toWanKwH(e.guPower));
      });
      const option = {
        color: colors,
        legend,
        tooltip: {
          show: true,
          trigger: "axis"
        },
        grid,
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: textColor
            }
          },
          axisTick: {
            show: false
          }
        },
        textStyle: {
          color: textColor
        },
        yAxis: {
          type: "value",
          name: "万kw.h",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: textColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "尖电量",
            data: data1,
            type: "line",
            smooth: true
          },
          {
            name: "峰电量",
            data: data2,
            type: "line",
            smooth: true
          },
          {
            name: "平电量",
            data: data3,
            type: "line",
            smooth: true
          },
          {
            name: "谷电量",
            data: data4,
            type: "line",
            smooth: true
          }
        ]
      };
      this.echarts5.setOption(option);
    },
    async getCollection() {
      const cur = this.powers[this.selected.year][this.selected.index - 1];
      // let y = this.selected.year;
      const res = await this.$axios.post("/eng/lad/electCollectionCycle", {
        id: this.comId,
        dateOne: cur.dateTwo,
        dateTwo: cur.dateOne
      });
      return res.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  .item-1 {
    grid-column-start: 1;
    grid-column-end: 7;
    .item-1-wrapper {
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
  .item-2 {
    grid-column-start: 7;
    grid-column-end: 12;
  }
  .item-3 {
    grid-column-start: 1;
    grid-column-end: 6;
  }
  .item-4 {
    grid-column-start: 6;
    grid-column-end: 12;
  }
}
</style>
